<template>
  <lay-layer
    v-model="open"
    size="sm"
    title="人员选择"
    :shade="false">
    <!-- <slot></slot> -->
    <lay-form
      :model="form"
      ref="layFormRef5"
      class="p-[12px]"
      size="xs">
      <lay-row>
        <lay-col md="8">
          <lay-form-item
            label="登录名:"
            prop="email">
            <lay-input v-model="form.email"></lay-input>
          </lay-form-item>
        </lay-col>
        <lay-col md="8">
          <lay-form-item
            label="中文名:"
            prop="email">
            <lay-input v-model="form.email">
              <template #suffix>
                <lay-icon
                  type="layui-icon-search"
                  color="#009688"></lay-icon
              ></template>
            </lay-input>
          </lay-form-item>
        </lay-col>
        <lay-col md="8">
          <lay-form-item
            label="工号:"
            prop="email">
            <lay-input v-model="form.email"></lay-input>
          </lay-form-item>
        </lay-col>
      </lay-row>
      <lay-row>
        <lay-col md="8">
          <lay-form-item
            label="角色:"
            prop="email">
            <lay-input v-model="form.email"></lay-input>
          </lay-form-item>
        </lay-col>
        <lay-col md="8">
          <lay-form-item
            label="员工状态:"
            prop="email">
            <lay-input v-model="form.email">
              <template #suffix>
                <lay-icon
                  type="layui-icon-search"
                  color="#009688"></lay-icon
              ></template>
            </lay-input>
          </lay-form-item>
        </lay-col>
        <lay-col md="8">
          <lay-form-item
            label="是否停用:"
            prop="email">
            <lay-input v-model="form.email"></lay-input>
          </lay-form-item>
        </lay-col>
      </lay-row>

      <lay-row>
        <lay-col :md="16">
          <lay-form-item label="部门:">
            <TreeSelect
              class="w-[100%]"
              v-model="searchAccount"
              v-model:hasChildValue="queryParams.hasChildValue"
              v-model:hasStopValue="queryParams.hasStopValue"
              hasChild
              :hasStop="true" />
          </lay-form-item>
        </lay-col>
        <lay-col :md="8">
          <lay-form-item label="工号:">
            <lay-input v-model="searchEmail"></lay-input>
          </lay-form-item>
        </lay-col>
      </lay-row>
      <lay-row>

        <lay-col md="4">
            <lay-form-item>
                <lay-button type="primary" size="xs">查询</lay-button>
            </lay-form-item>
          </lay-col>
      </lay-row>
    </lay-form>

    <lay-table
    :page="page"
    :resize="true"
    :height="'100%'"
    :columns="columns"
    :loading="loading"
    :default-toolbar="true"
    size="sm"
    :data-source="dataSource"
    v-model:selected-keys="selectedKeys"
    @change="change"
    @sortChange="sortChange">
    <template #status="{ row }">
      <lay-switch
        :model-value="row.status"
        @change="changeStatus($event, row)"></lay-switch>
    </template>
    <template v-slot:toolbar>
      <div class="flex items-center">
        <div class="flex items-center">
          <lay-icon type="layui-icon-add-circle"></lay-icon>新增
        </div>
        <div class="flex items-center ml-[12px]">
          <lay-icon type="layui-icon-add-circle"></lay-icon>删除
        </div>
        <div class="flex items-center ml-[12px]">
          <lay-icon type="layui-icon-add-circle"></lay-icon>导入
        </div>
      </div>
      <!-- <lay-button size="sm" type="primary"></lay-button>
  <lay-button size="sm" @click="remove">删除</lay-button> -->
    </template>
    <template v-slot:operator="{ row }">
      <lay-button
        size="xs"
        type="primary"
        >编辑</lay-button
      >
      <lay-button size="xs">查看</lay-button>
    </template>
  </lay-table>

  </lay-layer>
</template>

<script setup>
import { computed, defineProps, defineEmits, ref, watch } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue']);

const open = ref(false);

const form = ref({});

watch(
  () => props.modelValue,
  (val) => {
    open.value = val;
  }
);

watch(
  () => open.value,
  (val) => {
    emit('update:modelValue', val);
  }
);
</script>

<style>
.layui-layer-title {
  height: 32px;
  line-height: 32px;
}

.layui-layer-setwin {
  right: 15px;
  top: 8px;
}
</style>
